<template>
  <div class="SystemSetting">
    <el-form class="SystemSetting-form" label-position="top">
      <el-form-item class="SystemSetting-item">
        <template #label>
          <span class="SystemSetting-item-title">图片地址</span>
        </template>
        <div class="SystemSetting-item-content">
          <el-text class="SystemSetting-item-content-value" type="info">
            {{ systemSettingRef.imageAddress || '未设置' }}
          </el-text>
          <el-button
              type="primary"
              size="small"
              @click="handleEditImageAddress"
              class="SystemSetting-item-content-button"
          >
            编辑
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {getSystemSettings, updateImageAddress} from "../../api/systemSettingApi.js";
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';

const systemSettingRef = ref({});

const loadData = async () => {
  getSystemSettings().then((res) => {
    systemSettingRef.value = res;
  })
};

onMounted(() => {
  loadData()
})

// 处理编辑图片地址
const handleEditImageAddress = () => {
  // 使用Element Plus的输入对话框来获取路径
  ElMessageBox.prompt('请输入图片存储文件夹的完整路径', '设置图片地址', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPlaceholder: '例如: /Users/username/Pictures 或 C:\\Users\\username\\Pictures',
    inputValue: systemSettingRef.value.imageAddress || '',
    inputErrorMessage: '请输入有效的文件夹路径'
  }).then(({value}) => {
    if (value && value.trim()) {
      updateImageAddress({
        imageAddress: value
      }).then(() => {
        ElMessage.success('路径设置成功')
      }).catch((error) => {
        ElMessage.error(error);
      }).finally(() => {
        loadData()
      })
    }
  }).catch(() => {
    // 用户取消
  });
};
</script>

<style scoped lang="scss">
.SystemSetting {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;

  &-form {
    width: 96%;
  }

  &-item {
    margin-bottom: 24px;

    &-title {
      font-size: 16px;
      color: #303133;
      font-weight: 600;
      text-align: left;
    }

    &-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      width: 100%;

      &-value {
        flex: 1;
        margin-right: 16px;
        word-break: break-all;
        line-height: 1.5;
        text-align: left;
      }

      &-button {
        flex-shrink: 0;
        min-width: 60px;
      }
    }
  }
}

// 覆盖 el-form-item 的默认样式
:deep(.el-form-item__label) {
  padding-bottom: 8px;
  font-weight: 600;
}

:deep(.el-form-item__content) {
  line-height: normal;
}
</style>
